<template>
  <div>


    <!-- 左侧播放器 开始-->
    <div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application" aria-label="media player" style="left: 0px; height: 175px; bottom: 20px;">
      <div class="jp-type-playlist">
        <div id="jquery_jplayer_N" class="jp-jplayer" style="width: 90px; height: 90px;">

          <audio id="jp_audio_0" preload="metadata" src="" title="那英"></audio>
          <video id="jp_video_0" preload="metadata" title="那英" style="width: 0px; height: 0px;"></video>
        </div>
        <div class="jp-gui">
          <div class="jp-video-play" style="display: none;">
            <button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
          </div>
          <div class="jp-interface">
            <div class="jp-progress">
              <div class="jp-seek-bar" style="width: 100%;">
                <div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>
              </div>
            </div>
            <div class="jp-current-time" role="timer" aria-label="time">04:11</div>
            <div class="jp-duration" role="timer" aria-label="duration">04:17</div>
            <div class="jp-controls-holder">
              <div class="jp-controls">
                <button class="jp-previous" role="button" tabindex="0">上一曲</button>
                <button class="jp-play" role="button" tabindex="0">播放</button>
                <button class="jp-next" role="button" tabindex="0">下一曲</button>
                <button class="jp-stop" role="button" tabindex="0">暂停</button>
              </div>
              <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">静音</button>
                <button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
                <div class="jp-volume-bar">
                  <div class="jp-volume-bar-value" style="width: 10%;"></div>
                </div>
              </div>
              <div class="jp-toggles">
                <button class="jp-repeat" role="button" tabindex="0">重复</button>
                <button class="jp-shuffle" role="button" tabindex="0">随机</button>
                <!--<button class="jp-full-screen" role="button" tabindex="0">全屏</button>-->
              </div>
            </div>
            <div class="jp-details" style="display: none;">
              <div class="jp-title" aria-label="title">那英</div>
            </div>
          </div>
        </div>
        <div class="jp-playlist">
          <div class="jp-playlist-box" style="height: 80px;">
            <ul style="height: 1000px; display: block; top: 0px;">
              <li>
                <div>
                  <a href="javascript:;" class="jp-playlist-item-remove">×</a>
                  <a href="javascript:;" class="jp-playlist-item" tabindex="0">默 <span class="jp-artist" style="transform: rotate(180deg);"> - 那英</span></a>
                </div>
              </li>
              <li class="">
                <div>
                  <a href="javascript:;" class="jp-playlist-item-remove">×</a>
                  <a href="javascript:;" class="jp-playlist-item" tabindex="0">Ellens Gesang III D839 <span class="jp-artist" style="transform: rotate(180deg);"> - Geoffrey Parsons</span></a>
                </div>
              </li>
              <li>
                <div>
                  <a href="javascript:;" class="jp-playlist-item-remove">×</a>
                  <a href="javascript:;" class="jp-playlist-item" tabindex="0">Fire <span class="jp-artist" style="transform: rotate(180deg);"> - Said The Sky</span></a>
                </div>
              </li>
              <li class="jp-playlist-current" style="display: list-item;">
                <div>
                  <a href="javascript:;" class="jp-playlist-item-remove">×</a>
                  <a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">兰若词 <span class="jp-artist" style="transform: rotate(180deg);"> - 刘亦菲</span></a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="jp-no-solution" style="display: none;">
          <span style="transform: rotate(180deg);">升级需要</span> 您浏览器赞不支持播放，请更新版本
          <a href="" target="_blank">Flash插件</a>.
        </div>
      </div>
      <!--歌曲列表滚动条-->
      <div class="scrollBar" style="display: block;">
        <div class="bar" style="top: 0px;"></div>
      </div>
      <!--播放器展开隐藏按钮-->
      <button type="button" class="folded_bt" title="点击收缩" id="btnfold" style="top: 52px;">
        <span style="transform: rotate(180deg);"></span>
      </button>
      <div id="listRemove" style="display: block;"></div>
      <!--移除全部歌曲按钮-->
      <div id="listClose"></div>
      <!--歌曲列表展开收缩按钮-->
    </div>
    <!-- 左侧播放器 结束-->



  </div>

</template>

<script>
export default {
  name: "MP3Player"
}
</script>

<style scoped>
@import "./css/player.css";
</style>
